<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../favicon.ico" />
<title>Photo puzzle</title>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../header/header.css" />
<link rel="stylesheet" type="text/css" href="photopuzzle.css" />
</head>
<body>
	<div class="grey_shade"></div>
	<div class="container">
		<nav class="navbar aenigma-header" role="navigation">
			<div class="aenigma-header-left">
				<table>
					<tr>
						<td><a href="../menu/index.html"><img alt="Aenigmates" src="../back.png" class="img-responsive back"></a></td>
						<td><a href="../menu/index.html"><img alt="Aenigmates" src="../logo_aenigmates.jpg"
								class="img-responsive logo"></a></td>
					</tr>
				</table>
			</div>
			<div class="aenigma-header-right">
				<div class="dashed  dashed-top"></div>
				<div class="aenigma-title">Photo Puzzle</div>
				<div class="aenigma-level">Level 8</div>
				<div class="dashed"></div>
			</div>
			<div class="clear"></div>
			<hr />
		</nav>

		<div class="table-container"></div>
	</div>

	<script src="photopuzzle.js"></script>
	<script src="../jquery/jquery-2.0.3.min.js"></script>
	<script src="../storage/jquery.json-2.4.min.js"></script>
	<script src="../storage/jstorage.min.js"></script>
	<script src="../storage/aestorage.js"></script>
	<script src="photopuzzleView.js"></script>
	<script src="../bootstrap/js/bootstrap.min.js"></script>

	<script>
		function createArray(n) {
			var result = [];

			for ( var i = n; i > 0; i--) {
				result[i - 1] = i;
			}

			return result;
		}

		$(function() {
			var width = 10;
			var height = 8;

			var data = createArray(width * height);

			var shuffler = new AsyncShuffler(data);
			var view = new PhotoPuzzleView($('.table-container'), width, height, 940 / 520);
			view.setEnabled(false);
			var controller = new PhotoPuzzle(view, data);
			controller.startup();

			$('<img/>').attr('src', 'forest_960x540.jpg').load(function() {
				$(this).remove();

				shuffler.start(function(data, next, stepCount) {
					var delay = (stepCount === 0) ? 1500 : 25;
					setTimeout(function() {
						controller.updateView();
						next();
					}, delay);
				}, function() {
					view.setEnabled(true);
				});
			});

		});
	</script>

</body>
</html>